<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/common_include_for_server.jsp"%>
<link href="js/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="<%=request.getContextPath()%>/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/uploadify/swfobject.js"></script>
<script type="text/javascript" src="js/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<style>
<!--
.reco-index{
	font-size: 12px;
}
.reco-level-1{
	font-size: 12px;
	font-weight: bold;
}
.reco-level-2{
	padding-left: 20px;
	font-size: 12px;
}
-->
</style>
<script type="text/javascript">
var recommendIds = {};
var relatedReport = {};
</script>
<s:iterator value="article.articleReports">
	<script> relatedReport['${report.reportId}'] = '<s:property value="report.title"/>'; </script>
</s:iterator>
<s:iterator value="article.articleRecos">
	<script> recommendIds['${industry.industryId}'] = true;</script>
	<s:if test="%{firstPosition eq 1}">
	<script> recommendIds['${industry.industryId}top'] = true;</script>
	</s:if>
</s:iterator>
<script type="text/javascript">
var industryTree = null;
var articleTypeTree = null;
var industryTreeData = '<s:property value="#application[@org.zhouhe.util.Constant@APPLICATION_KEY_INDUSTRY_XML ]" escape="false"/>';
var articleTypeTreeData = '<s:property value="#application[@org.zhouhe.util.Constant@APPLICATION_KEY_ARTICLE_TYPE_XML ]" escape="false"/>';
$(document).ready(function() {
	//Industry tree:
	industryTree = new dhtmlXTreeObject("industryTreeBox","100%","100%",0);
	industryTree.setImagePath("js/dhtmlxTree/imgs/");
	industryTree.enableCheckBoxes(true, false);
	industryTree.enableThreeStateCheckboxes(true);
	industryTree.loadXMLString(industryTreeData, function(){
		//load callback:
	}); 
	//ArticleType tree:
	articleTypeTree = new dhtmlXTreeObject("articleTypeTreeBox","100%","100%",0);
	articleTypeTree.setImagePath("js/dhtmlxTree/imgs/");
	articleTypeTree.enableCheckBoxes(true, false);
	articleTypeTree.enableThreeStateCheckboxes(true);
	articleTypeTree.loadXMLString(articleTypeTreeData, function(){
		//load callback:
	}); 
	
	var options = {
		//filebrowserBrowseUrl : '/<%=request.getContextPath()%>',
		//filebrowserImageBrowseUrl : '<%=request.getContextPath()%>',
		//filebrowserUploadUrl : '<%=request.getContextPath()%>/manage/upload.action',
		filebrowserImageUploadUrl : '<%=request.getContextPath()%>/manage/upload.action'
	};
	CKEDITOR.replace('article.content', options);
	$('#upload_image').uploadify({
		'uploader' : '<%=request.getContextPath()%>/js/uploadify/uploadify.swf',
		'script' : 'uploadify.action;jsessionid=<%=session.getId()%>',//firefox等浏览器中Flash无法获取会话ID，验证失败，跳转到登录界面！！
		'fileDataName' : 'files',
		'cancelImg' : '<%=request.getContextPath()%>/js/uploadify/cancel.png',
		'fileExt' : '*.jpg;*.gif;*.png',
		'fileDesc' : 'Image Files',
		'scriptData': {dir:'article_img'},
		'auto' : true,
		'buttonImg' : '<%=request.getContextPath()%>/images/upload.png',
		'width' : '66',
		'height' : '24',
		onComplete : function(evt, queueID, fileObj, response, data) {
			$('#article_imgName').val(response);
			$('#article_img').attr('src', response);
		}
	});
	
	$( "#article_displayTime" ).datepicker({dateFormat: 'yy-mm-dd', changeYear: true, changeMonth: true});
	$("#selectIndustryDialog").dialog({
		title: '选择行业',
		autoOpen: false, 
		resizable: false,
		modal: true,
		open: function(event, ui) {
			industryTree.setCheck(0,false);
			$.each($('#industryValues input'), function(i, input){
				industryTree.setCheck($(input).val(), true);
			});
		},
		buttons: {
			"确定":function(){
				$('#industryValues').empty();
				$('#industryLabels').empty();
				$('#recoPanel').empty();
				var levelOneIds = {};
				var inds =  industryTree.getAllChecked().split(',');
				var tmpIndex = 0;
				for(var i=0; i<inds.length; i++){
					if(inds[i].length > 0){
						var id = inds[i];
						var label = industryTree.getItemText(id) ;
						var pid = industryTree.getParentId(id);
						if(pid != '0'){
							var pLabel = industryTree.getItemText(pid);
							label = pLabel +' &gt;&gt; '+ label;
							$('#industryValues').append('<input type="hidden" value="'+ id +'" name="articleIndustries['+ i +'].industry.industryId"/>');
							$('#industryLabels').append('['+ label +']<br/>');
							//一级行业：
							if(!levelOneIds[pid]){
								var ifChecked = '';
								if(recommendIds[pid]){
									ifChecked = ' checked="checked" ';
								}
								var html = [];
								html.push('<div class="reco-level-1">');
								html.push('<input type="checkbox" name="articleRecoList['+tmpIndex+'].industry.industryId" value="'+pid+'" id="reco_'+pid+'" onchange="$(\'#reco_'+pid+'_top\').attr(\'disabled\', !$(\'#reco_'+pid+'\').attr(\'checked\'));"');
								if(recommendIds[pid]){
									html.push(' checked="checked" ');
								}
								html.push('/><label for="reco_'+pid+'">'+pLabel+'</label>');
								html.push('（<input type="checkbox" name="articleRecoList['+tmpIndex+'].firstPosition" value="1" id="reco_'+pid+'_top"');
								if(recommendIds[pid+'top']){
									html.push(' checked="checked" ');
								}
								if(!recommendIds[pid]){
									html.push(' disabled="disabled" ');
								}
								html.push('/><label for="reco_'+pid+'_top">置顶</label>）');
								html.push('');
								html.push('');
								html.push('');
								html.push('</div>');
								$('#recoPanel').append(html.join(''));
								tmpIndex++;
								levelOneIds[pid] = true;
							}
							//二级行业：
							var html = [];
							html.push('<div class="reco-level-2">');
							html.push('<input type="checkbox" name="articleRecoList['+tmpIndex+'].industry.industryId" value="'+id+'" id="reco_'+id+'" ');
							if(recommendIds[id]){
								html.push(' checked="checked" ');
							}
							html.push('/><label for="reco_'+id+'">'+label+'（置顶）</label>');
							html.push('');
							html.push('');
							html.push('');
							html.push('');
							html.push('</div>');
							$('#recoPanel').append(html.join(''));
							tmpIndex++;
						}
						
					}
				}
				$('#selectIndustryDialog').dialog('close');
			},
			"取消":function(){ $('#selectIndustryDialog').dialog('close'); }
		}
	});
	$("#selectArticleTypeDialog").dialog({
		title: '选择栏目',
		autoOpen: false, 
		resizable: false,
		modal: true,
		open: function(event, ui) {
			articleTypeTree.setCheck(0,false);
			$.each($('#articleTypeValues input'), function(i, input){
				articleTypeTree.setCheck($(input).val(), true);
			});
		},
		buttons: {
			"确定":function(){
				$('#articleTypeValues').empty();
				$('#articleTypeLabels').empty();
				var inds = articleTypeTree.getAllChecked().split(',');
				var displayRecoDiv = 'none';
				for(var i=0; i<inds.length; i++){
					var id = inds[i];
					if(id.length > 0){
						var label = articleTypeTree.getItemText(id) ;
						var pid = articleTypeTree.getParentId(id);
						if(pid != '0'){
							label = articleTypeTree.getItemText(pid) +' &gt;&gt; '+ label;
							if(pid==1){//表示文章类型中有“新闻咨讯”，就是说需要设置文章的推荐。
								displayRecoDiv = 'block';
							}
							$('#articleTypeValues').append('<input type="hidden" value="'+ id +'" name="articleArticleTypes['+ i +'].articleType.articleTypeId"/>');
							$('#articleTypeLabels').append('['+ label +']<br/>');
						}
					}
				}
				$('#recommendDIV').css('display', displayRecoDiv);
				$('#selectArticleTypeDialog').dialog('close');
			},
			"取消":function(){ $('#selectArticleTypeDialog').dialog('close'); }
		}
	});
	$("#relatedReportsDialog").dialog({
		title: '选择相关报告',
		autoOpen: false, 
		resizable: false,
		width: 900,
		height: 550,
		modal: true,
		open: function(event, ui) {
			loadRelatedReports.prototype.showPage = 1;
			loadRelatedReports();
		},
		beforeClose: function(event, ui) {
			renderReportList();
		},
		buttons: {
			"关闭":function(){ 
				$('#relatedReportsDialog').dialog('close'); 
			}
		}
	});	
});
function loadRelatedReports(){
	var keywords = $('#article_keywords').val();
	if(keywords.length == ''){
		$('#reportsList').html('请添加关键字后再使用此功能！');
	}else{
		var data = {
			'keywords': keywords, 
			'pageUtil.showPage': loadRelatedReports.prototype.showPage
		};
		$('#reportsList').load('manage/article!reportListByKeywords.action',data);
	}
}
function selectReport(checked, reportId, title){
	if(checked){
		relatedReport[reportId] = title;
	}else{
		removeReport(reportId);
	}
}
function removeReport(reportId){
	delete relatedReport[reportId];
	$('#repot_'+ reportId).remove();
}
function renderReportList(){
	$('#relatedReports').empty();
	var i = 0;
	for(var reportId in relatedReport){
		var html = [];
		html.push('<div id="repot_'+ reportId +'">');
		html.push('<a href="report.action?report.reportId='+ reportId +'" target="_blank">'+ relatedReport[reportId] +'</a>');
		html.push('（<a href="javascript:void(0);" onclick="removeReport('+ reportId +');">删除关联</a>）');
		html.push('<input type="hidden" name="articleReportList['+ i +'].report.reportId" value="'+ reportId +'"/>');
		html.push('</div>');
		$('#relatedReports').append(html.join(''));	
		i++;
	}
}
function addIndustrySelector(){
	$('#selectIndustryDialog').dialog('open');
}
function addArticleTypeSelector(){
	$('#selectArticleTypeDialog').dialog('open');
}
</script>
<div id="relatedReportsDialog">
	<div id="reportsList"></div>
</div>
<div id="selectIndustryDialog">
	 <div id="industryTreeBox" style="width:270;height:400"></div>
</div>
<div id="selectArticleTypeDialog">
	 <div id="articleTypeTreeBox" style="width:270;height:400"></div>
</div>
<s:form id="articleForm" action="article!saveOrUpdateDo" method="post">
	<table border="1" width="100%">
		<tr>
			<th width="100px;">
				标题
			</th>
			<td>
				<s:textfield name="article.title" value="%{article.title}" size="50" />
			</td>
		</tr>
		<tr>
			<th width="100px;">
				来源
			</th>
			<td>
				<s:textfield name="article.quoteFrom" value="%{article.quoteFrom}" size="50" />
			</td>
		</tr>
		<tr>
			<th>
				分类
			</th>
			<td>
				<span id="articleTypeValues">
					<s:iterator value="article.articleArticleTypes" status="sts">
						<s:hidden name="articleArticleTypes[%{#sts.index }].articleType.articleTypeId" value="%{articleType.articleTypeId}"></s:hidden>
					</s:iterator>
				</span>
				<span id="articleTypeLabels">
					<s:iterator value="article.articleArticleTypes" status="sts">
						[
						<s:if test="articleType.articleType != null">
							<s:property value="articleType.articleType.name"/> &gt;&gt;
						</s:if>
						<s:property value="articleType.name"/>]<br/>
					</s:iterator>
				</span>
				<s:a href="javascript:void(0);" onclick="addArticleTypeSelector()">选择</s:a>
			</td>
		</tr>
		<tr>
			<th>
				行业
			</th>
			<td>
				<span id="industryValues">
					<s:iterator value="article.articleIndustries" status="sts">
						<s:hidden name="articleIndustries[%{#sts.index }].industry.industryId" value="%{industry.industryId}"></s:hidden>
					</s:iterator>
				</span>
				<span id="industryLabels">
					<s:iterator value="article.articleIndustries" status="sts">
						[
						<s:if test="industry.industry != null">
							<s:property value="industry.industry.name"/> &gt;&gt;
						</s:if>
						<s:property value="industry.name"/>]<br/>
					</s:iterator>
				</span>
				<s:a href="javascript:void(0);" onclick="addIndustrySelector()">选择</s:a>
			</td>
		</tr>
		<tr>
			<th>推荐</th>
			<td>
				<div id="recommendDIV" style="display: ${displayRecoDiv}">
				<div class="reco-index">
					<input type="checkbox" name="article.recoIndex" value="1" id="reco_index" onchange="$('#reco_index_top').attr('disabled', !$('#reco_index').attr('checked'));"
						<s:if test="%{article.recoIndex eq 1}">checked="checked"</s:if>
					/><label for="reco_index">首页</label>，
					<input type="checkbox" name="article.firstPosition" value="1" id="reco_index_top"
						<s:if test="%{article.recoIndex eq 0}">disabled="disabled"</s:if>
						<s:if test="%{article.firstPosition eq 1}">checked="checked"</s:if>
					/><label for="reco_index_top">置顶</label>
				</div>
				<div id="recoPanel">
					<%Integer index = 0; %>
					<s:iterator value="industryList" status="psts" var="p">
						<%index++; %>
						<div class="reco-level-1">
							<input type="checkbox" name="articleRecoList[<%=index%>].industry.industryId" value="${industryId}" id="reco_${industryId}" onchange="$('#reco_${industryId}_top').attr('disabled', !$('#reco_${industryId}').attr('checked'));"
								<s:if test="%{status eq 1}">checked="checked"</s:if>
							/><label for="reco_${industryId}"><s:property value="name"/></label>
							（<input type="checkbox" name="articleRecoList[<%=index%>].firstPosition" value="1" id="reco_${industryId}_top"
								<s:if test="%{orderId eq 1}">checked="checked"</s:if>
								<s:if test="%{status eq 0}">disabled="disabled"</s:if>
							/><label for="reco_${industryId}_top">置顶</label>）
						</div>
						<s:iterator value="industries" status="sts">
							<%index++; %>
							<div class="reco-level-2">
								<input type="hidden" name="articleRecoList[<%=index%>].firstPosition" value="${industryId}"/>
								<input type="checkbox" name="articleRecoList[<%=index%>].industry.industryId" value="${industryId}" id="reco_${industryId}" 
									<s:if test="%{status eq 1}">checked="checked"</s:if>
								/><label for="reco_${industryId}">${p.name } &gt;&gt; ${name }（置顶）</label>
							</div>
						</s:iterator>
					</s:iterator>
				</div>
				</div>
			</td>
		</tr>
		<tr>
			<th>时间</th>
			<td><input id="article_displayTime" name="article.displayTime" value='<s:date name="article.displayTime" format="yyyy-MM-dd"/>'/></td>
		</tr>
		<tr>
			<th>关键字</th>
			<td><textarea id="article_keywords" name="article.keywords" cols="70" rows="2"><s:property value="%{article.keywords}"/></textarea></td>
		</tr>
		<tr>
			<th>
				缩略图
			</th>
			<td>
				<table>
					<tr>
						<td>
							<span style="height: 100px; float: right;">
								<s:if test="article.imgName != null">
									<a href="${article.imgName}" target="_blank">
									<img id="article_img" style="height: 100px;border: 0;" src="${article.imgName}" />
									</a>
								</s:if>
								<s:else>
									<img id="article_img" style="height: 100px;border: 0;" src="images/no_pic.png" />
								</s:else>
								
							</span>
						</td>
						<td valign="top">
							<input type="file" id="upload_image" />
							<s:hidden id="article_imgName" name="article.imgName" value="%{article.imgName}" />
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<th>
				摘要
			</th>
			<td>
				<textarea name="article.summary" rows="4" cols="80"><s:property value="%{article.summary}" /></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<s:textarea name="article.content" rows="6" cols="60"></s:textarea>
			</td>
		</tr>
		<tr>
			<th>
				相关报告
			</th>
			<td>
				<div id="relatedReports">
					<s:iterator value="article.articleReports" status="sts">
						<div id="repot_${report.reportId}">
							<a href="report.action?report.reportId=${report.reportId}" target="_blank"><s:property value="report.title"/></a>
							（<a href="javascript:void(0);" onclick="removeReport(${report.reportId});">删除关联</a>）
							<input type="hidden" name="articleReportList[${sts.index }].report.reportId" value="${report.reportId}"/>
						</div>
					</s:iterator>
				</div>
				<a href="javascript:void(0)" onclick="$('#relatedReportsDialog').dialog('open');">根据关键字添加</a>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<s:hidden name="article.articleId" value="%{article.articleId}"></s:hidden>
				<s:hidden name="pageUtil.showPage" value="%{pageUtil.showPage}"></s:hidden>
				<input type="submit" value="提交"/>
			</td>
		</tr>
	</table>
</s:form>